<template>
    <div>
        <div class="mb-10">

            <label>物流单号：<el-input  style="width: 200px" v-model="location" placeholder="请输入订单号"/></label>

            <label> 关键词：<el-input  style="width: 200px" v-model="keyword" placeholder="正在获取订单地址"/></label>

            <label> 经度：<el-input  style="width: 200px" v-model="markerPo.lat"/></label>

            <!--<label> 纬度：<el-input  style="width: 200px" v-model="markerPo.lng"/></label>-->
            <el-button type="primary" @click="getlocation">查询物流位置</el-button>
        </div>

        <baidu-map
                ak="7pgLo0kjSxiGPFukRRjTvEWQpUwAEI8N"
                :scroll-wheel-zoom="true"
                @rightclick="clickBmap"
        >
            <!--地图视图-->

            <bm-view class="map" v-show="mapflag"></bm-view>

            <!--显示更多-->

            <div class="more_panel" >
        <span :class="{ down: isShowPanel }" @click.stop="showPanel">
          <span>{{ isShowPanel ? "隐藏" : "显示" }}</span
          >搜索列表<i class="el-icon-d-arrow-right"></i>
        </span>
            </div>

            <!--搜索-->

            <bm-local-search
                    :keyword="keyword"
                    :panel="isShowPanel"
                    :auto-viewport="true"
                    :location="location"
                    @searchcomplete="searchcomplete"
            ></bm-local-search>

            <!--点标注-->

            <bm-marker
                    :position="markerPo"
                    :dragging="true"
                    :title="storeName"
                    :zIndex="999999999"
                    @click="infoWindowOpen"
                    :icon="{ url: markerIcon, size: { width: 34, height: 34 } }"
                    @dragend="dragend"
            >
                <bm-info-window
                        :show="isShowInfo"
                        @close="infoWindowClose"
                        @open="infoWindowOpen"
                >{{ address }}</bm-info-window
                >
            </bm-marker>
        </baidu-map>
    </div>
</template>

<script>
    import BaiduMap from "vue-baidu-map/components/map/Map.vue";

    import BmView from "vue-baidu-map/components/map/MapView"; //地图视图

    import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch"; //搜索

    import BmMarker from "vue-baidu-map/components/overlays/Marker"; //点标注

    import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗

    export default {
        components: {
            BaiduMap,

            BmView,

            BmLocalSearch,

            BmMarker,

            BmInfoWindow,
        },

        data() {
            return {
                mapflag:false,
                storeName: "",

                center: {
                    //经纬度

                    lng: 39.9,
                    lat: 116.3,
                },

                zoom: 3, //地图展示级别
                location: "",

                keyword: "",

                markerPo: {
                    lng: 39.9,
                    lat: 116.3,
                },

                isShowPanel: true,

                isShowInfo: false,

                markerIcon: "", //标注图片

                address: "",
            };
        },

        methods: {
            getlocation(){
                console.log("获取地理坐标")
               // "https://api.66mz8.com/api/yto.php?num="
                this.$axios.post("https://api.66mz8.com/api/yto.php?num="+this.location).then(
                    res=>{
                        if(res.data.data==null){
                            this.$message({
                                message:"请输入正确订单号",
                                type:"success"
                            })
                        }else{
                        // console.log(res)
                            const loading = this.$loading({
                                lock: true,
                                text: 'Loading',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            setTimeout(() => {
                                this.mapflag =true
                                loading.close();
                            }, 2000);
                        console.log(res.data.data[0])
                        this.keyword =res.data.data[3].info;
                        }
                    }
                )
            },
            clickBmap(val) {
                //右击鼠标放标注

                this.markerPo = val.point;
            },

            showPanel() {
                //点击标注出现弹框

                this.isShowPanel = !this.isShowPanel;
            },

            infoWindowClose() {
                //弹框关闭

                this.isShowInfo = false;
            },

            infoWindowOpen() {
                //弹框打开

                this.isShowInfo = true;
            },

            dragend(val) {
                //标注拖拽完成获取坐标信息

                this.markerPo = val.point;

                let geocoder = new BMap.Geocoder(); //创建地址解析器的实例

                geocoder.getLocation(val.point, (rs) => {
                    this.address = rs.address;
                });
            },

            searchcomplete(arr) {
                this.isShowPanel = true;
            },
        },
    };
</script>

<style lang="css" scoped>
    .map {
        width: 100%;

        height: 450px;
    }
    span {
        cursor: pointer;


    }
    i {
        transform: rotate(90deg);
    }
    .more_panel {
        text-align: center;

        font-size: 12px;

        color: #2878ff;

        padding-top: 10px;



    }
    i {
        transform: rotate(-90deg);
    }
    span.down {

    }
</style>